<!DOCTYPE html>
<html class="x-admin-sm">
<head>
    <meta charset="UTF-8">
    <title>操作歌手</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi"/>
    <link rel="stylesheet"
          href="css/font.css">
    <link rel="stylesheet"
          href="css/index.css">
    <script src="lib/layui/layui.js"
            charset="utf-8"></script>
    <script type="text/javascript"
            src="js/index.js"></script>
</head>
<body>
<div class="x-nav">
		<span class="layui-breadcrumb"> <a href="">首页</a> <a href="">QQ音乐管理</a>
			<a> <cite>操作歌手</cite></a>
		</span> <a class="layui-btn layui-btn-small"
                   style="line-height: 1.6em; margin-top: 3px; float: right"
                   onclick="location.reload()" title="刷新"> <i
        class="layui-icon layui-icon-refresh" style="line-height: 30px"></i></a>
</div>
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-body ">
                    <form class="layui-form layui-col-space5">
                        <!-- <div class="layui-inline layui-show-xs-block">
                            <input class="layui-input" autocomplete="off" placeholder="开始日"
                                name="start" id="start">
                        </div>
                        <div class="layui-inline layui-show-xs-block">
                            <input class="layui-input" autocomplete="off" placeholder="截止日"
                                name="end" id="end">
                        </div> -->
                        <div class="layui-inline layui-show-xs-block">
                            <input type="text" name="singerName" placeholder="请输入歌手名字" id="admin_id_kw"
                                   autocomplete="off" class="layui-input">
                        </div>
                        <div class="layui-inline layui-show-xs-block">
                            <button class="layui-btn" lay-submit="" lay-filter="sreach" type="button"
                                    onclick="operate()">
                                <i class="layui-icon">&#xe615;</i>
                            </button>
                        </div>
                    </form>
                </div>
                <div class="layui-card-header">

                    <button class="layui-btn"
                            onclick="xadmin.open('添加歌手','./operate-singer-add.html')">
                        <i class="layui-icon"></i>添加
                    </button>
                </div>
                <div class="layui-card-body layui-table-body layui-table-main">
                    <table class="layui-table layui-form" id="blogs">
                        <thead>
                        <tr>
                            <th>编号</th>
                            <th>歌手名字</th>
                            <th>歌手简拼</th>
                            <th>歌手类别</th>
                            <th>歌手性别</th>
                            <th>歌手状态</th>
                            <th>歌手头像</th>
                            <th>歌手描述</th>
                            <th>国籍</th>
                            <th>歌手出生日期</th>
                            <th>地区</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody>

                        <!-- 进入页面先请求控制器获取商品数据 -->
                        <!--<%&#45;&#45; <c:if test="${requestScope.operateAdminList == null}">
                            <c:redirect url="../OperateAdminServlet" />
                        </c:if>
                        <c:forEach items="${requestScope.operateAdminList}"
                            var="operateAdmin"> &#45;&#45;%>-->
                        <tr>
                            <td><input type="checkbox" name="id" value="1"
                                       lay-skin="primary"></td>
                            <td>${operateAdmin.adminId}</td>
                            <td>${operateAdmin.adminname}</td>
                            <td>${operateAdmin.password}</td>
                            <td>${operateAdmin.operateDetailAdmin.JurisdictionId}</td>
                            <td class="td-manage"><a style="text-decoration: none"
                                                     onclick="member_stop(this,'10001')" href="javascript:;"
                                                     title="停用"> <i class="layui-icon">&#xe601;</i>
                            </a> <a title="编辑" href="javascript:;"
                                    onclick="xadmin.open('编辑','admin-articletypeadd.html','800','510','1')"
                                    class="ml-5" style="text-decoration: none"> <i
                                    class="layui-icon">&#xe642;</i>
                            </a> <a title="删除" href="javascript:;"
                                    onclick="member_del('${operateAdmin.adminId}')"
                                    style="text-decoration: none"> <i class="layui-icon">&#xe640;</i>
                            </a></td>
                        </tr>
                        <!-- </c:forEach> -->
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="layui-card-body ">
    <div class="page">
        <!-- 	<div>
                <a class="prev" href="">&lt;&lt;</a> <a class="num" href="">1</a>
                <span class="current">2</span> <a class="num" href="">3</a> <a
                    class="num" href="">489</a> <a class="next" href="">&gt;&gt;</a>
            </div> -->
        <div class="layui-table-page">
            <div id="layui-table-page1">
                <div class="layui-box layui-laypage layui-laypage-default"
                     id="layui-laypage-2">
                    <a href=" " class="layui-laypage-prev layui-disabled"
                       data-page="0"><i class="layui-icon"></i></a> <span
                        class="layui-laypage-curr"><em
                        class="layui-laypage-em"></em><em>1</em></span> <a
                        href="javascript:;" data-page="2">2</a> <a
                        href="javascript:;" data-page="3">3</a> <span
                        class="layui-laypage-spr">…</span> <a href="javascript:;"
                                                              class="layui-laypage-last" title="尾页"
                                                              data-page="100">100</a>
                    <a href="javascript:;" class="layui-laypage-next"
                       data-page="2"> <i class="layui-icon"></i>
                    </a> <span class="layui-laypage-skip">到第 <input type="text"
                                                                    min="1" value="1" class="layui-input">页
											<button type="button" class="layui-laypage-btn">确定</button>
										</span> <span class="layui-laypage-count">共 1000 条</span> <span
                        class="layui-laypage-limits"> <select lay-ignore="">
												<option value="2" selected="">2</option>
												<option value="5">5</option>
												<option value="10">10</option>
										</select>
										</span>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.js"></script>
<script>
    //定义一个全局变量初始页码,默认记录数
    let pageNum = 1;
    let pageSize = 10;

    //页面加载进行管理员列表查询
    operate();

    /*管理员-查询*/
    function operate() {
        //对每页/条数进行校验
        pageSize = $("#layui-laypage-2 select").val();
        //如果不存在，则设置初始值
        if (pageSize == null) {
            pageSize = 10;
        }

        //使用AJAX技术发起异步请求
        $.ajax({
            async: true,
            type: "get",
            url: "/Singer/singerPageList",
            data: {
                singerName: $("#admin_id_kw").val(), //歌手关键字
                pageNum: pageNum, //页码
                pageSize: pageSize //下拉框选中的每页记录数
            },
            contentType: "application/x-www-form-urlencoded",
            dataType: "json",
            success: function (result, status, xhr) {
                //渲染
                let content = "";
                //判断是否存在数据
                if (result.data != null) {
                    $.each(result.data.list, function (index, obj) {
                        let isShelf="";
                        if("1"==obj.singerStatus){
                            isShelf = "<span>正常</span>";
                        }else{
                            isShelf = "<span>冻结</span>";
                        }

                        content += "<tr>" +
                            "<td>" + obj.singerId + "</td>" +
                            "<td>" + obj.singerName + "</td>" +
                            "<td>" + obj.singerAbbr + "</td>" +
                            "<td>" + obj.singerType.singerTypeName + "</td>" +

                            "<td>" + obj.singerSex + "</td>" +
                            "<td>" +isShelf+ "</td>" +
                            "<td>" + obj.singerImage + "</td>" +
                            "<td>" + obj.singerDescription + "</td>" +

                            "<td>" + obj.singerNationality + "</td>" +
                            "<td>" + obj.singerBirthday + "</td>" +
                            "<td>" + obj.district.districtName + "</td>" +
                            /*	"<td>"+isShelf+"</td>"+*/
                            "<td class=\"td-manage\">" +
                            /*  "<a style=\"text-decoration:none\" onclick=\"member_stop(this,'10001')\" href=\"javascript:;\" title=\"停用\">"+
                                 "<i class=\"layui-icon\">&#xe601;</i>"+
                             "</a>"+ */
                            "<a title=\"编辑\" href=\"javascript:;\" onclick=\"xadmin.open('编辑','operate-singer-modify.html?singerId=" + obj.singerId + "&singerName=" + obj.singerName + "&singerAbbr=" + obj.singerAbbr + "&singerCategoryId=" + obj.singerType.singerTypeName + "&singerSex=" + obj.singerSex + "&singerStatus=" + obj.singerStatus + "&singerImage=" + obj.singerImage + "&singerDescription=" + obj.singerDescription + "&singerNationality=" + obj.singerNationality + "&singerBirthday=" + obj.singerBirthday + "&districtId=" + obj.district.districtName + "','800','510','1')\" class=\"ml-5\" style=\"text-decoration:none\">" +
                            "<i class=\"layui-icon\">&#xe642;</i>" +
                            "</a>" +
                            /*"<a  id=\"delete\" title=\"删除\" href=\"javascript:;\" onclick=\"operateAdmin_del('" + obj.singerId + "')\" style=\"text-decoration:none\">" +
                            "<i class=\"layui-icon\">&#xe640;</i>" +
                            "</a>" +*/
                            "</td>" +
                            "</tr>";
                        /*}else if("1"==obj.jurisdictionId.adminJurisdictionId){*/
                        /*isShelf = "<span>子管理员</span>";
                        content += "<tr>"+
                        "<td>"+(index+1)+"</td>"+
                            "<td>"+obj.adminId+"</td>"+
                            "<td>"+obj.password+"</td>"+
                            "<td>"+obj.adminname+"</td>"+
                            "<td>"+isShelf+"</td>"+
                             "<td class=\"td-manage\">"+
                            /!*  "<a style=\"text-decoration:none\" onclick=\"member_stop(this,'10001')\" href=\"javascript:;\" title=\"停用\">"+
                                 "<i class=\"layui-icon\">&#xe601;</i>"+
                             "</a>"+ *!/
                             "<a title=\"编辑\" href=\"javascript:;\" onclick=\"xadmin.open('编辑','admin-blogs-modify.jsp?adminId="+obj.adminId+"','800','510','1')\" class=\"ml-5\" style=\"text-decoration:none\">"+
                                  "<i class=\"layui-icon\">&#xe642;</i>"+
                             "</a>"+

                             "<a  id=\"delete\" title=\"删除\" href=\"javascript:;\" onclick=\"operateAdmin_del('"+obj.adminId+"')\" style=\"text-decoration:none\">"+
                                   "<i class=\"layui-icon\">&#xe640;</i>"+
                             "</a>"+
                       "</td>"+
                        "</tr>";*/
                        //}
                    });
                    //更新指定表格
                    $("#blogs tbody").html(content);
                } else {
                    //更新指定表格
                    $("#blogs tbody").empty();
                }

                //渲染分页栏目
                let pageContent = "";
                if (result.data != null) {
                    //拼接上一页
                    //判断是否是第一页
                    if (result.data.pageNum == 1) {
                        pageContent += "<span class=\"layui-laypage-prev layui-disabled\" data-page=\"0\"><i class=\"layui-icon\">上一页</i></span>";
                    } else {
                        pageContent += "<a href=\"javascript:;\" class=\"layui-laypage-prev\" data-page=\"" + (result.data.pageNum - 1) + "\"><i class=\"layui-icon\">上一页</i></a>";
                    }
                    //拼接页码
                    for (let i = 1; i <= result.data.pages; i++) {
                        //激活当前页码
                        if (i == result.data.pageNum) {
                            pageContent += "<span class=\"layui-laypage-curr\" data-page=\"" + i + "\"><em class=\"layui-laypage-em\"></em><em>" + i + "</em></span>";
                        } else {
                            pageContent += "<a href=\"javascript:;\" data-page=\"" + i + "\">" + i + "</a>";
                        }
                    }
                    //拼接下一页
                    //判断是否是最后一页
                    if (result.data.pageNum == result.data.pages) {
                        pageContent += "<span class=\"layui-laypage-next layui-disabled\" data-page=\"" + (result.data.pageNum + 1) + "\"><i class=\"layui-icon\">下一页</i></span>";
                    } else {
                        pageContent += "<a href=\"javascript:;\" class=\"layui-laypage-next\" data-page=\"" + (result.data.pageNum + 1) + "\"><i class=\"layui-icon\">下一页</i></a>";
                    }
                    //拼接页码输入框
                    pageContent += "<span class=\"layui-laypage-skip\">到第 <input type=\"text\" min=\"1\" max=\"" + result.data.pages + "\" value=\"1\" class=\"layui-input\">页" +
                        "<button type=\"button\" class=\"layui-laypage-btn\">确定</button>" +
                        "</span>";

                    //拼接总条数
                    pageContent += "<span class=\"layui-laypage-count\">共 " + result.data.total + " 条</span>";

                    //下拉框
                    pageContent += "<span class=\"layui-laypage-limits\">" +
                        "<select lay-ignore=\"\">" +
                        "<option value=\"2\">2 条/页</option>" +
                        "<option value=\"5\">5 条/页</option>" +
                        "<option value=\"10\">10 条/页</option>" +
                        "</select>" +
                        "</span>";

                    //设置到指定位置
                    $("#layui-laypage-2").html(pageContent);

                    //为下拉框设置被选中的选项
                    $("#layui-laypage-2 select option").each(function () {
                        if ($(this).val() == result.data.pageSize) { //判断
                            $(this).prop("selected", "selected");
                        }
                    });
                } else {
                    pageContent = "查无数据";
                    $("#layui-laypage-2").html(pageContent);
                }
            },
            error: function (xhr, status, error) {
                layer.msg('数据加载失败', {icon: 5, time: 1000});
            }
        });
    }

    /*上一页 下一页 页码*/
    $("body").on("click", "#layui-laypage-2 a", function () {
        //获取超链接的自定义属性data-page上的页码，对pageNum重新赋值
        pageNum = $(this).data("page");
        //调用查询方法
        operate();
    });

    /*确定页码*/
    $("body").on("click", "#layui-laypage-2 button", function () {
        let inputPageNum = $("#layui-laypage-2 input").val();
        let maxPage = $("#layui-laypage-2 input").prop("max");
        if (inputPageNum > 0 && parseInt(inputPageNum) <= parseInt(maxPage)) {
            pageNum = inputPageNum;
            operate();
        } else {
            layui.use('layer', function () {
                layer.msg("输入页码只能在1-" + maxPage + "之间", {icon: 2, time: 3000});
            });
        }
    });

    /*下拉框确定*/
    $("body").on("change", "#layui-laypage-2 select", function () {
        //设置页码值
        pageNum = 1;
        //调用查询方法
        operate();
    });

    /*搜索*/
    function goods_search() {
        //设置页码值
        pageNum = 1;
        //调用查询方法
        goods_search_page();
    }


    /*管理员-删除*/
    function operateAdmin_del(singerId) {
        layer.confirm('确认要删除吗？', {icon: 3, title: '提示信息'},
            function (index) {
                //请求后端控制器删除数据
                $.getJSON("/admin/deleteByAdminId", {op: "delete", adminId: adminId}, function (result, status, xhr) {
                    if (result.data == true) {//删除成功
                        layui.use('layer', function () {
                            layer.msg(result.message, {
                                icon: 1,
                                time: 3000
                            });
                        });
                        //删除成功之后调用查询方法
                        operate();
                    } else {//删除失败
                        layui.use('layer', function () {
                            layer.msg(result.message, {
                                icon: 2,
                                time: 3000
                            });
                        });
                    }
                });
                /* location.href = "${pageContext.request.contextPath}/OperateAdminServlet?op=delete&adminId="
                        + adminId; */
            });
    }

    /*//读取相应信息
    let message = "${requestScope.msg}"
    if (message != "") {
        //使用layui的layer弹出错误信息
        layui.use('layer', function() {
            layer.msg(message, {
                icon : 1,
                time : 3000
            });
        });
    }  */

</script>
</html>